{% extends "base.html" %}
{% load i18n %}
{% load  bootstrap3 %}
{% load  static %}
{% block header-css %}

    <link href="/static/webssh_static/css/xterm.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/webssh_static/css/fullscreen.min.css" rel="stylesheet" type="text/css"/>



    <link href="{% static 'css/plugins/ztree/awesomeStyle/awesome.css' %}" rel="stylesheet">
    <style type="text/css">


        div#rMenu {
            position: absolute;
            visibility: hidden;
            text-align: left;
            top: 100%;
            left: 0;
            z-index: 1000;
            float: left;
            padding: 5px 0;
            margin: 2px 0 0;
            list-style: none;
            background-clip: padding-box;
        }

        div#rMenu li {
            margin: 1px 0;
            cursor: pointer;
        {#list-style: none outside none;#}
        }

        .dropdown a:hover {
            background-color: #f1f1f1
        }
    </style>

{% endblock %}

{% block  title %}资产信息{% endblock %}



{% block page-content %}
    <div class="row wrapper border-bottom white-bg page-heading ">
        <div class="col-lg-10">
            <h2>资产信息</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="{% url "index" %}">主页</a>
                </li>
                <li>
                    <a href="{% url    'asset:asset_list' %}" >资产管理</a>
                </li>
                <li class="active">
                    <strong>资产信息</strong>
                </li>
            </ol>
        </div>
        <div class="col-lg-2" id="split-left">
        </div>
    </div>

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-2" id="split-left">
                <div class="ibox float-e-margins">
                    <div class="ibox-content mailbox-content" style="padding-top: 0">
                        <div class="file-manager ">
                            <div class="clearfix">
                                <div data-options="iconCls:'icon-save'" title="ztree事件">
                                    <ul id="ztree4" class="ztree"></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-lg-10" id="split-right">

                <div class="ibox float-e-margins">

                    <div class="ibox-title">
                        <h5>资产信息</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项 1</a>
                                </li>
                                <li><a href="#">选项 2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <div class="table-responsive">

                            <form id="cha" class="form-horizontal" action="{% url 'asset:asset_list' %}" method="GET">
                                {% csrf_token %}
                                <div class="col-md-2"><input type="text" class="form-control" name="name" placeholder="主机名、IP" required></div>
                                <button class="btn btn-sm btn-primary" type="submit">查询</button>

                                                                {% if perms.asset.add_assetinfo %}
                                <a href="{% url    'asset:asset_add' %}" class="btn btn-sm btn-primary ">添加</a>
                                {% endif %}
                            </form>
                            <form id="del_form_asset_all" class="form-horizontal  " action="{% url 'asset:asset_export' %}" method="post">
                                {% csrf_token %}
                                <table class="table table-striped table-bordered table-hover dataTables-asset">
                                    <thead>
                                    <tr>
                                        <th width="20"><input type="checkbox" id="CheckedAll"></th>
                                        <th>主机名</th>
                                        <th>内网IP</th>
                                        <th>外网IP</th>
                                        <th>平台</th>
                                        <th>项目</th>
                                        <th>业务</th>
                                        <th>激活</th>
                                        <th>动作</th>
                                    </tr>
                                    </thead>

                                    {% for   row   in   asset_list.object_list %}

                                        <tr class="gradeA" id="{{ row.id }}">
                                            <td><input type="checkbox" value="{{ row.id }}" name="id"></td>
                                            <td class="center"><a
                                                    href="{% url  "asset:asset_detail"   pk=row.id %}">{{ row.hostname }}</a>
                                            </td>
                                            <td class="center">{{ row.network_ip }}</td>
                                            <td class="center">{{ row.inner_ip }}</td>
                                            <td class="center">{{ row.platform }} | {{ row.region }}</td>
                                            <td class="center"><div class="label label-primary">{{ row.project }}</div></td>
                                         <td class="center"><div class="label label-success">{{ row.business }}</div></td>
                                            <td class="center"><b>{% ifequal  row.is_active  True %}   <i class="fa fa-check text-navy"></i>{% endifequal %}
                                             {% ifequal   row.is_active  False  %}   <i class="fa fa-times text-danger"></i> {% endifequal %} </b>
                                            </td>
                                            <td><a class="btn btn-primary  btn-xs "
                                                   href="{% url  "asset:asset_update"  pk=row.id %}">编辑</a>
                                                <a class="btn btn-danger  btn-xs  asset_del">删除</a>
                                            <a type="button" class="btn btn-success btn-xs webssh">终端
                                            </a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>

                                </table>
                                <a class="btn btn-sm btn-danger  asset_all_del">批量删除</a>
                                <button class="btn btn-sm btn-primary" type="submit">导出</button>
                                <a href="{% url    'asset:asset_export' %}" class="btn btn-sm btn-primary ">导出全部</a>
                                <a href="{% url    'asset:asset_import' %}"  class="btn btn-sm btn-primary ">导入</a>


  <div style="text-align:center;">
<nav class="pagination">


         <li><a href="{% url "asset:asset_list" %}?page=1">首页 </a></li>

            {% if asset_list.has_previous %}
                <li class="long"><a href="?{{ asset_list.previous_page_number.querystring }}">上一页</a></li>
            {% endif %}

            {% for page in asset_list.pages %}
            {% if page %}
                {% ifequal page asset_list.number %}
                    <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
                {% else %}
                     <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                {% endifequal %}
            {% else %}
                <li class="none"><a href="">...</a></li>
            {% endif %}
            {% endfor %}
            {% if asset_list.has_next %}
                <li class="long"><a href="?{{ asset_list.next_page_number.querystring }}">下一页</a></li>
            {% endif %}
  <li>
                                                <a href="{% url "asset:asset_list" %}?page={{ asset_list.paginator.num_pages }}">尾页 </a>
                                            </li>
                                            <li><span style="color: #0a0a0a">总: &nbsp;{{ asset_list.paginator.num_pages }} 页 </span>
                                            </li>

</nav>
  </div>





                            </form>


                        </div>

                    </div>


                </div>
            </div>
        </div>
    </div>





    {% block footer-js %}

        <script src="{% static 'webssh_static/js/xterm.min.js' %}"></script>
        <script src="{% static 'webssh_static/js/fullscreen.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/plugins/ztree/jquery.ztree.all.min.js' %}"></script>
        <script src="{% static 'js/jquery.form.min.js' %}"></script>


        <script type="text/javascript">
            $(function () {
                var setting = {
                    view: {
                        showLine: true,
                        selectedMulti: false,
                        dblClickExpand: false
                    },

                    data: {
                        simpleData: {
                            enable: true,
                            idKey: "id",
                            pIdKey: "pId",
                            rootPId: 0
                        }
                    },

                    callback: {
                        beforeClick: getCurrentNode,
                        {#                         onClick : zTreeOnClick#}
                    }
                };

                $.ajax({
                    url: '{% url  'asset:asset_ztree' %}',
                    type: 'get',
                    data: '',
                    dataType: 'json',
                    success: function (data) {
                        zTreeObj = $.fn.zTree.init($("#ztree4"), setting, data);
                        zTreeObj.expandAll(true);
                    }
                });
            });

            function getCurrentNode(treeId, treeNode) {
                curNode = treeNode;
                zTreeOnClick(curNode);
            }

            function zTreeOnClick(treeNode) {


                if (treeNode.id > 0  &&  treeNode.id < 10000 ) {
                    window.location.href = encodeURI( '/asset/asset.html?project=' + treeNode.n);
                }
                else {
                    window.location.href = encodeURI('/asset/asset.html?business=' + treeNode.id+'&project=' + treeNode.pId)
                }
                if (treeNode.id == 0) {
                    window.location.href = '/asset/asset.html'
                }

            }

            $(document).ready(function () {
                $('.dataTables-asset').DataTable({

                    "oLanguage": {
                        "sLengthMenu": "每页显示 _MENU_ 条记录",
                        "sZeroRecords": "对不起，查询不到任何相关数据",
                        "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_条记录",
                        "sInfoEmtpy": "找不到相关数据",
                        "sInfoFiltered": " 数据表中共为 _MAX_ 条记录",
                        "sProcessing": "正在加载中...",
                        "sSearch": "搜索",
                        "oPaginate": {
                            "sFirst": "第一页",
                            "sPrevious": " 上一页 ",
                            "sNext": " 下一页 ",
                            "sLast": " 最后一页 "
                        }
                    },
                    "order": [[1, 'desc']],
                    destroy: true,


                    bPaginate: false,
                    dom: '<"html5buttons"B>lTfgitp,'

                });
            });
            $(function () {

                $(document).on('click', '.asset_del', function () {
                    var id = $(this).parent().parent().attr('id');
                    swal({
                        title: "你确定删除",
                        text: "你将无法恢复",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "确定",
                        closeOnConfirm: false
                    }, function () {
                        $.ajax({
                            headers: {"X-CSRFToken": '{{ csrf_token }}'},
                            url: "/asset/asset-all-del.html",
                            type: 'POST',
                            data: {'nid': id},
                            success: function (data) {
                                var obj = JSON.parse(data);
                                if (obj.status) {
                                    swal({title: "删除", text: "已成功删除", type: "success"}, function () {
                                        window.location.reload();
                                    })
                                } else {
                                    swal("错误", "删除" + "[ " + obj.error + " ]" + "遇到错误", "error");
                                }
                            }
                        });


                    });

                });

                $(document).on('click', '.asset_all_del', function () {

                    swal({

                        title: "你确定删除",
                        text: "你将无法恢复",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "确定",

                        closeOnConfirm: false
                    }, function () {
                        $.ajax({
                            headers: {"X-CSRFToken": '{{ csrf_token }}'},
                            url: "/asset/asset-all-del.html",
                            type: 'POST',
                            data: $('#del_form_asset_all').serialize(),
                            success: function (data) {
                                var obj = JSON.parse(data);
                                if (obj.status) {
                                    swal({title: "删除", text: "已成功删除", type: "success"}, function () {
                                        window.location.reload();
                                    })
                                } else {
                                    swal("错误", "删除" + "[ " + obj.error + " ]" + "遇到错误", "error");
                                }
                            }
                        });


                    });
                });


            });
            jQuery(function ($) {
                $(document).on('click', '.webssh', function (event) {

                    event.preventDefault();

                    var id_a = $(this).parent().parent().attr('id');

                    $.ajax({
                        headers: {"X-CSRFToken": '{{ csrf_token }}'},
                        url: "/asset/asset-webssh.html",
                        type: 'POST',
                        data: {'id': id_a},
                        success: function (ret) {

                            var obj = JSON.parse(ret);
                            var ips = obj.ip;
                            var ports = obj.port;
                            var usernames = obj.username;
                            var passwords = obj.password;
                            var privatekey = obj.privatekey;

                            $.ajax({
                                url: "http://{{ web_ssh }}:{{ web_port }}/",
                                type: 'POST',
                                data: {
                                    hostname: ips,
                                    port: ports,
                                    username: usernames,
                                    password: passwords,
                                    privatekey: privatekey
                                },
                                crossDomain: true,
                                success: callback
                            });

                            function current_geometry() {
                                cols = parseInt(window.innerWidth / 10);
                                rows = parseInt(window.innerHeight / 24);
                                return [cols, rows];
                            }


                            function callback(msg) {
                                console.log(msg);
                                if (msg.status) {
                                    swal("错误", "登陆" + "[ " + msg.status + " ]" + "遇到错误", "error");
                                    return;
                                }


                                var url = "ws://{{ web_ssh }}:{{ web_port }}/" + 'ws?id=' + msg.id,
                                    socket = new WebSocket(url),
                                    terminal = document.getElementById('#terminal'),
                                    geometry = current_geometry();
                                term = new Terminal({cursorBlink: true, cols: geometry[0], rows: geometry[1]});

                                console.log(url);
                                term.on('data', function (data) {
                                    // console.log(data);
                                    socket.send(data);
                                });

                                socket.onopen = function (e) {
                                    $('.container1').hide();
                                    term.open(terminal, true);
                                    term.toggleFullscreen(true);
                                };

                                socket.onmessage = function (msg) {
                                    console.log(msg);
                                    term.write(msg.data);
                                };

                                socket.onerror = function (e) {
                                    console.log(e);
                                };

                                socket.onclose = function (e) {
                                    console.log(e);
                                    term.destroy();
                                    $('.container1').show();
                                    // status.text(e.reason);
                                };
                            }


                            $(window).resize(function () {
                                if (typeof term != "undefined") {
                                    geometry = current_geometry();
                                    term.geometry = geometry;
                                    term.resize(geometry[0], geometry[1]);
                                }
                            });

                        }
                    });
                });
            });
        </script>
    {% endblock %}

    {% block footer-js-ajax %}
    {% endblock %}

{% endblock %}